/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-07 14:36:09
 * @LastEditors: chenbinfa
 * @LastEditTime: 2022-09-20 10:21:39
 */
import React, { useRef, useState, useEffect } from "react";
import styled from "styled-components";
import { Card } from "antd";
import _ from "lodash";
import { useNavigate } from "react-router-dom";
import { NavLink, Outlet, useParams } from "react-router-dom";
import { ThTable } from "@/components/ThTable";
import SearchBar from "@/components/SearchBar";
import MList from "@/components/mobile/MList";
import Footer from "@/components/Footer";
import api from "@services/";
import common from "@/utils/common";

const columns = [
    {
        title: "Rank",
        dataIndex: "rank_number",
        key: "rank_number",
        width: "15%",
        textWrap: "word-break",
        showType: "rank"
    },
    {
        title: "Accounts",
        dataIndex: "nominator_acc",
        key: "nominator_acc",
        width: "36%",
        textWrap: "word-break",
        showType: "copyLong-link",
        link: '/account/{nominator_acc}'
    },
    {
        title: "Staking",
        dataIndex: "nominator_staking",
        key: "nominator_staking",
        width: "15%",
        textWrap: "word-break",
        showType: "balance-logo"
    },
    {
        title: "Available Reward",
        dataIndex: "nominator_reward",
        key: "nominator_reward",
        width: "15%",
        textWrap: "word-break",
        ellipsis: true,
        showType: "balance-logo"
    },
    {
        title: "Status",
        dataIndex: "state",
        key: "state",
        width: "15%",
        render:()=>{
            return 'Positive'
        }
    }
];

const Main = ({ ...propsS }) => {
    const { q } = useParams();
    const navigator = useNavigate();
    const [totle, setTotle] = useState(0);
    document.title = "Signature Accounts";


    const props = {
        border: true,
        size: "middle",
        pagesize: 10,
        cacheKey:"nominator-list",
        loadList: {
            method: api.account.nominators,
            params: {
                accountId: q
            },
            cb: {
                total: setTotle
            }
        },
        table: {
            columns,
        }
    };

    useEffect(() => {
		common.showAPIUrl();
	}, []);

    return (
        <div className="containner-in">
            <SearchBar background={"#f4f4f4"} height="100px" />

            <div className="content">
                <div className="top-title" style={{ margin: "30px 0" }}>
                    <span onClick={() => navigator(-1)} className="link">
                        <img src="/img/left.svg" width={7} />
                        &nbsp;&nbsp;
                    </span>
                    <label>Nominator  ({totle})</label>
                </div>
                <div className="list">
                    <div className="pc-list">
                        <ThTable props={props} />
                    </div>
                    <div className="mobile-list">
                        <Card
                            title={
                                <span>
                                    <img width={19} src={process.env.PUBLIC_URL + "/img/icon_jh.png"} /> Signature Accounts
                                </span>
                            }
                            className="myRadius">
                            <MList props={props} />
                        </Card>
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    );
};

export default styled(Main)`
	display: block;
	overflow: hidden;
	
`;

